<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import BabylonApp from "@/components/babylon/index";

const webglRef = ref<HTMLCanvasElement | null>(null)  // 引用的画布对象
let babylonApp: BabylonApp;

function windowResize() {
  babylonApp.engine.resize();
}

onMounted(() => {
  if (webglRef.value) {  // 如果画布加载完成
    babylonApp = new BabylonApp(webglRef.value);
    window.addEventListener('resize', windowResize)
  }
})

onUnmounted(()=>{
  window.removeEventListener('resize', windowResize);
})

</script>

<template>
  <canvas ref="webglRef"></canvas>
</template>

<style scoped>

</style>